<template>
  <Layout :name="'实时水情'">
    <div class="real-table-theader">
      <div class="th-item">站名</div>
      <div class="th-item">时间</div>
      <div class="th-item">水位</div>
      <div class="th-item">流量(m³/s)</div>
    </div>
    <div class="real-table-tbody">
      <swiper
        class="screen-swiper"
        :loop="true"
        :modules="modules"
        :slides-per-view="5"
        :space-between="50"
        :direction="'vertical'"
        :autoplay="{ delay: 2000, disableOnInteraction: false }"
      >
        <swiper-slide v-for="item in tableData" :key="item.id">
          <div class="real-tr">
            <div class="real-td">{{ item.name }}</div>
            <div class="real-td special-td">{{ dayjs(item.tm).format('DD HH:mm') }}分</div>
            <div class="real-td">{{ item.z }}</div>
            <div class="real-td">{{ item.q }}</div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </Layout>
</template>

<script lang="ts" setup>
  import 'swiper/css';
  import { ref, onMounted } from "vue";
  import Layout from '../layout.vue';
  import { dayjs } from 'element-plus';
  import { Autoplay, Scrollbar } from 'swiper';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { getRealWaterData } from '@/api/pageApi';

  const props = defineProps(['stationData']);

  // 在modules加入要使用的模块
  const modules = [
    Autoplay,
    Scrollbar
  ]
  const tableData = ref([]);

  onMounted(() => {
    getRealWaterData().then(res => {
      tableData.value = res.data.map((item: any) => {
        const { name } = props.stationData.find((itex: any) => {
          if(itex.code == item.stcd) {
            return itex;
          }
        });
        return {
          name,
          ...item
        }
      });
    })
  });
</script>

<style lang="less" scoped>
  .real-table-theader {
      width: 92%;
      height: 45px;
      margin-left: 20px;
      background-image: url('@/assets/img/screen/first-tr.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      .th-item {
        flex: 1;
        border-right: 1px solid #fff;
        text-align: center;
        color: #fff;
        font-size: 15px;
        &:last-child {
          border-right: 0;
        }
      }
  }
  .real-table-tbody {
    width: 94%;
    height: 196px;
    margin: 10px auto 0 auto;
    box-sizing: border-box;
    padding-left: 14px;
    .screen-swiper {
      width: 100%;
      height: 100%;
      :deep(.swiper-slide) {
        margin-bottom: 13px !important;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url('@/assets/img/screen/other-tr.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .real-tr {
        width: 100%;
        display: flex;
        .real-td {
          flex: 1;
          display: flex;
          color: #ffffff;
          font-size: 15px;
          justify-content: center;
          align-items: center;
          border-right: 1px solid #ffffff;
          &:last-child {
            border-right: 0;
          }
        }
        .special-td {
          font-size: 12px;
        }
      }
    }
  }
</style>